<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta charset="UTF-8">
    <style>
        .list div{
            display: block;
            background-color: #ff0000;
            color: #FFFFFF;
            margin: 5px;
            padding: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <input type="text">
    <button type="button">左侧入</button>
    <button type="button">右侧入</button>
    <button type="button">左侧出</button>
    <button type="button">右侧出</button>
    <button type="button">排序</button>
    <div class="list"></div>
<script>
    function getData()
    {
        var divObj = document.getElementsByClassName("list");
        var list = divObj[0].getElementsByTagName("div");
        var myArray = [];
        for (var i=0,l=list.length;i<l;i++)
        {
            myArray.push(list[i].innerHTML);
        }
        return myArray;
    }
    function render(data)
    {
        var divObj = document.getElementsByClassName("list");
        //排序
        //data.sort(function (a, b) { return ~b-~a });
        var myArray = [];
        for (var i=0,l=data.length;i<l;i++)
        {
            var top = 110 - ~~data[i];
            var str = "<div style=\"height:" + data[i] + "px;margin-top:"+top+"px;\">" + data[i] + "</div>";
            console.log(str);
            myArray.push(str);
        }
        divObj[0].innerHTML = myArray.join("");
    }
    window.onload = function ()
    {
        var btnArray = document.getElementsByTagName("button");
        btnArray[0].onclick = function()
        {
            var data = getData();
            var LthData = data.length;
            if (LthData>60){alert("超过60个");return;}
            var input = document.getElementsByTagName("input")[0].value;
            if ((~~input)>100||(~~input)<10)
            {
                alert("限制输入10-100");
                // document.getElementsByTagName("input")[0].value = "";
                return;
            }
            if(!isNaN(input))
            {
                data.unshift(input);
                render(data);
                //document.getElementsByTagName("input")[0].value = "";
            }else alert("请输入有效数字")
        }
        btnArray[1].onclick = function()
        {
            var data = getData();
            var LthData = data.length;
            if (LthData>60){alert("超过60个");return;}
            var input = document.getElementsByTagName("input")[0].value;
            if ((~~input)>100||(~~input)<10)
            {
                alert("限制输入10-100");
                // document.getElementsByTagName("input")[0].value = "";
                return;
            }
            if(!isNaN(input))
            {
                data.push(input);
                render(data);
                // document.getElementsByTagName("input")[0].value = "";
            }else alert("请输入有效数字")
        }
        btnArray[2].onclick = function()
        {
            var data = getData();
            data.shift();
            render(data);
        }
        btnArray[3].onclick = function()
        {
            var data = getData();
            data.pop();
            render(data);
        }
        btnArray[4].onclick = function ()
        {
            var data = getData();
            data.sort(function (a, b) { return ~~a-~~b });
            render(data);
        }
    }
</script>
</body>
</html>